<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="static/css/jquery-ui.css" rel='stylesheet' />
<link rel="stylesheet" href="static/css/bootstrap.min.css" rel='stylesheet' />
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/jquery-ui.js" charset="UTF-8"></script>
<title>添加会议</title>
<style type="text/css">
        .hidden{
        display: none;
        }
        
    table td.dselected {
        background-color: green;
    }
        
        </style>
</head>
<script type="text/javascript">

$(function () {
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth()+1;
	var day = now.getDate();
    $('#btn-change-day').datepicker({format: 'yyyy-mm-dd'}).
    on('changeDate.datepicker.amui', function (event) {
        location.href='/meetings/d/' + $('#btn-change-day').data('date') + '/r/FUvz9bSR58DdAxNKHZfJpY';
    });

    $('.busy').click(function () {
        location.href = $(this).data('href');
    });

    // 可预订
    $('.mavailab').click(function(){
                        // 弹框选择会议类型
    });
    $('body').append('<div class="am-popover am-popover-top" style="opacity:1;white-space: nowrap" id="am-popover-order"><div class="am-popover-inner"></div><div class="am-popover-caret"></div></div>');
    var table = $("#meetingRoomsTable");
    $('#meetingRoomsTable .mavailab').hover(function() {
        $('#am-popover-order .am-popover-inner').text('双击或拖动选择预订' + $(this).data('time') + $(this).parent().data('room-name'));
        var thisOffsetLeft = $(this).offset().left;
        var popoverWidth = $('#am-popover-order').outerWidth();
        var offsetLeft = thisOffsetLeft + (popoverWidth/2 - $(this).outerWidth()/2 + 10) > $('body').width() - 20 ? $('body').width() - popoverWidth - 5: thisOffsetLeft - popoverWidth/2 + $(this).outerWidth()/2
        $('#am-popover-order').css({
            left: offsetLeft,
            top: $(this).offset().top - 52
        })
        $('#am-popover-order').show();
    }, function() {
        $('#am-popover-order').hide();
    });

    $('.mlimit').each(function() {
        $(this).style = "background=red";
        $(this).popover({
            content: '受限不能预定',
            trigger: 'hover'
        });
    });


    // 时间选择
    

    var isMouseDown = false;
    var startRowIndex = null;
    var startCellIndex = null;
    var startCellTime = null;
    var endCellTime = null;
    var cellRoomId = null;
    var cellRoomName = null;

    function selectTo(cell) {

        var row = cell.parent();
        var cellIndex = cell.index();
        var rowIndex = row.index();

        var rowStart, rowEnd, cellStart, cellEnd;

        rowStart = startRowIndex;
        rowEnd = rowIndex;

        if (cellIndex < startCellIndex) {
            cellStart = cellIndex;
            cellEnd = startCellIndex;
        } else {
            cellStart = startCellIndex;
            cellEnd = cellIndex;
        }

        endCellTime = cell.data('time');
        cellRoomId = cell.parent().data('room-id');
        cellRoomName = cell.parent().data('room-name');

        var rowCells = table.find("tr").eq(rowStart).find("td");
        for (var j = cellStart; j <= cellEnd; j++) {
            rowCells.eq(j).addClass("dselected");
        }

    }

    table.find("td.meeting-cell").mousedown(function (e) {
                isMouseDown = true;
                var cell = $(this);

                table.find(".dselected").removeClass("dselected"); // deselect everything

                if (e.shiftKey) {
                    selectTo(cell);
                } else {
                    cell.addClass("dselected");
                    startCellIndex = cell.index();
                    startRowIndex = cell.parent().index();
                    startCellTime = cell.data('time');
                    endCellTime = cell.data('time');
                }

                return false; // prevent text selection
            })
            .mouseover(function () {
                if (!isMouseDown) return;
                selectTo($(this));
            })
            .bind("selectstart", function () {
                return false;
            });

    $(document).mouseup(function () {
        if (isMouseDown) {
            // 检查选择的时间段
            var dStart = new Date(year+'-'+month+'-'+day+'T' + startCellTime + ':00');
            var dEnd = new Date(year+'-'+month+'-'+day+'T' + endCellTime + ':00');
            var duration = (dEnd.getTime() - dStart.getTime()) / 60000 + 30;
            if (duration > 720) {
                duration = 60;
            }

            if (startCellTime== undefined) {
                isMouseDown = false;
                return;
            }
            if (cellRoomName == undefined) {
                isMouseDown = false;
                return;
            }
		alert(cellRoomName+"~~"+startCellTime+ '&duration=' + duration);
                                // 弹框选择会议类型
                // TODO:  不存在, 改js
                /* $('#dlg-new-meeting-title').html('预订2017-11-30' + cellRoomName + startCellTime);
                $('#dlg-new-meeting-link-s').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new?startTime=' + startCellTime +  '&duration=' + duration);
                                        $('#dlg-new-meeting-link-i').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new-interview?startTime=' + startCellTime + '&duration=' + duration);
                                                            $('#dlg-new-meeting-link-c').attr('href', '/meetings/d/2017-11-30/r/' + cellRoomId + '/new-customer?startTime=' + startCellTime + '&duration=' + duration); */
                                   // $('#new-meeting-dlg').modal({width: "280px"});
                                        }
        isMouseDown = false;
    });
});

</script>
<body>
<table border="1" id = "meetingRoomsTable">
	<tr>
        <th width="12%">会议室名称</th>
		<th colspan="2" width="2%">10:00</th>
		<th colspan="2" width="2%">11:00</th>
		<th colspan="2" width="2%">12:00</th>
		<th colspan="2" width="2%">13:00</th>
		<th colspan="2" width="2%">14:00</th>
		<th colspan="2" width="2%">15:00</th> 
		<th colspan="2" width="2%">16:00</th>                    
		<th colspan="2" width="2%">17:00</th>      
		<th colspan="2" width="2%">18:00</th>   
		<th colspan="2" width="2%">19:00</th>
	</tr>
    <tr id ="r1" data-room-name="会议室1">
        <td>会议室1</td>
        
        <td class="meeting-cell mavailab" data-time="10:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="10:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="11:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="11:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="12:00" width="1%"></td>
		<!-- <td class="meeting-cell busy" data-href="/meetings/JsuCGgCnvs3yA6xGt3ML1s/go" colspan="2" data-am-popover="{content: 'ttt(sss)', trigger: 'hover focus'}" width="2%"></td> -->
        <td class="meeting-cell mavailab" data-time="12:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="13:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="13:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="14:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="14:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="15:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="15:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="16:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="16:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="17:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="17:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="18:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="18:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="19:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="19:30" width="1%"></td>
                                                                                                                                                                           
    </tr>
    <tr id ="r2" data-room-name="会议室2">
        <td>会议室2</td>
        
        <td class="meeting-cell mavailab" data-time="10:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="10:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="11:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="11:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="12:00" width="1%"></td>
		<!-- <td class="meeting-cell busy" data-href="/meetings/JsuCGgCnvs3yA6xGt3ML1s/go" colspan="2" data-am-popover="{content: 'ttt(sss)', trigger: 'hover focus'}" width="2%"></td> -->
        <td class="meeting-cell mavailab" data-time="12:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="13:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="13:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="14:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="14:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="15:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="15:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="16:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="16:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="17:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="17:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="18:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="18:30" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="19:00" width="1%"></td>
        <td class="meeting-cell mavailab" data-time="19:30" width="1%"></td>
    </tr>
  </table>
        <p id ='log'></p>
</body>
</html>